import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {actionCreator} from "./store";

//主要是用来 写 公众号的item
class PubLeftWrapper extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            hoverIndex: -1,
        };
        this.handlerAuthorHoverStyle = this.handlerAuthorHoverStyle.bind(this);
        this.handlerClickAuthorIndex = this.handlerClickAuthorIndex.bind(this);

    }

    render() {

        return (
            <div style={pubWrapper}>
                <ul style={pubUlAuthorStyle}>
                    {
                        this.props.pubAuthorList.map((item, index) => {

                            let itemStyle;

                            if (this.props.pubChoiceIndex === index) {
                                itemStyle = {...pubAuthorStyle, ...authorItemHover};
                            } else {
                                if (this.state.hoverIndex === index) {
                                    itemStyle = {...pubAuthorStyle, ...authorItemHover};
                                } else {
                                    itemStyle = pubAuthorStyle;
                                }
                            }

                            return (
                                <li
                                    key={item.get("id")}
                                    style={pubLiStyle}
                                    onClick={() => {
                                        this.handlerClickAuthorIndex(index)
                                    }}
                                >
                                    <img src={"https://www.wanandroid.com/resources/image/pc/top_icon.svg"} alt={"关注"}/>
                                    <span
                                        onMouseEnter={() => {
                                            this.handlerAuthorHoverStyle(index, true);
                                        }}
                                        onMouseLeave={
                                            () => {
                                                this.handlerAuthorHoverStyle(index, false);
                                            }
                                        }
                                        style={itemStyle}>{item.get("name")}</span>
                                </li>
                            );
                        })
                    }
                </ul>
            </div>
        );
    }

    componentDidMount() {
        if (this.props.pubAuthorList.size === 0) {
            this.props.requestPubAuthors();
        }
    }

    handlerAuthorHoverStyle(index, bool) {
        if (this.props.pubChoiceIndex === index) return;
        let changeIndex = -1;
        if (bool) {   //鼠标进入
            changeIndex = index;
        }
        this.setState(() => ({
            hoverIndex: changeIndex,
        }));
    }

    handlerClickAuthorIndex(index) {
        if (this.props.pubChoiceIndex !== index) {
            this.props.changeClickAuthorIndex(index);
            const id = this.props.pubAuthorList.getIn([index, "id"]);
            if (this.props.pubArticleMap.has(id)) {
                this.props.changeArtList(id);
            } else {
                this.props.requestArtList(id, 0);
            }

        }
    }

}

const mapState = (state) => {

    return {
        pubAuthorList: state.getIn(["publicReducer", "pubAuthorList"]),
        pubChoiceIndex: state.getIn(["publicReducer", "pubChoiceIndex"]),
        pubArticleMap: state.getIn(["publicReducer", "pubArticleMap"])
    }
};

const dispatchState = (dispatch) => {
    return {
        requestPubAuthors() {
            const action = actionCreator.requestPubAuthors();
            dispatch(action);
        },
        changeClickAuthorIndex(index) {
            const action = actionCreator.updateChoiceAuthorIndex(index);
            dispatch(action);
        },
        requestArtList(id, page) {
            const action = actionCreator.requestAuthorArticleList(id, page);
            dispatch(action);
        }, changeArtList(id) {
            const action = actionCreator.saveAuthorArticleList(id, 0, null);
            dispatch(action);
        }
    }
};

export default connect(mapState, dispatchState)(PubLeftWrapper);

const pubWrapper = {
    float: "left",
    width: 370,
};

const pubUlAuthorStyle = {
    marginTop: 200,
    marginLeft: 116,

};
const pubLiStyle = {
    cursor: "pointer",
    marginTop: 5,
};

const pubAuthorStyle = {
    display: "inline-block",
    width: 130,
    color: "#484848",
    borderBottom: "solid 1px #dbe2e8",
    boxSizing: "border-box",
    marginLeft: 10,
    padding: "10px 4px",
};

const authorItemHover = {
    borderBottom: "solid 1px #2782ef",
    color: "#2782ef"
};

